<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>员工薪资信息</title>
    <link rel="stylesheet" href="./common/element/element.css">
</head>

<body>
    <div id="app">
        <h2>员工薪资信息</h2>
        <el-row>
            <el-col :span="18" style="margin-bottom: 10px">
                <el-input v-model="keywords" style="width: 260px;" placeholder="请输入薪资单号"></el-input>
                <el-button type="info" >查询</el-button>
                <el-button type="primary" @click="dialogVisible = true">新增</el-button>
                <el-button type="success" >刷新</el-button>
                <el-button type="warning" >批量删除</el-button>
            </el-col>
        </el-row>

        <el-table :data="tableData" stripe border style="width: 99%">
            <el-table-column type="selection" width="45" align="center"></el-table-column>
            <el-table-column prop="sno" label="薪资单号" align="center"></el-table-column>
            <el-table-column prop="employname" label="员工" align="center"></el-table-column>
            <el-table-column prop="basic" label="基本工资" align="center"></el-table-column>
            <el-table-column prop="attend" label="考勤工资" align="center"></el-table-column>
            <el-table-column prop="reward" label="奖惩工资" align="center"></el-table-column>
            <el-table-column prop="others" label="其他工资" align="center"></el-table-column>
            <el-table-column prop="total" label="总计" align="center"></el-table-column>
            <el-table-column prop="yearx" label="年月" align="center"></el-table-column>
            <el-table-column prop="memo" label="备注" align="center"></el-table-column>
            <el-table-column fixed="right" label="操作" width="150" align="center">
                <template slot-scope="scope">

                    <el-button type="primary" icon="el-icon-edit" size="small" circle @click="dialogVisible = true">
                    </el-button>
                    <el-button type="danger" icon="el-icon-delete" size="small" circle ></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" style="margin-top: 10px">
            <el-pagination background layout="prev, pager, next" :total="total" :current-page="pageNum"
                :page-size="pageSize" @current-change="current_change">
            </el-pagination>
        </el-row>

        <el-dialog title="员工薪资信息" :visible.sync="dialogVisible">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="薪资单号">
                    <el-input v-model="form.sno" readonly></el-input>
                </el-form-item>
                <el-form-item label="员工">
                    <el-select v-model="form.employid" filterable placeholder="请选择员工" value-key="employid">
                        <el-option v-for="item in employ" :key="item.employid" :label="item.employname"
                            :value="item.employid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="基本工资">
                    <el-input v-model="form.basic" placeholder="请输入基本工资"></el-input>
                </el-form-item>
                <el-form-item label="考勤工资">
                    <el-input v-model="form.attend" placeholder="请输入考勤工资"></el-input>
                </el-form-item>
                <el-form-item label="奖惩工资">
                    <el-input v-model="form.reward" placeholder="请输入奖惩工资"></el-input>
                </el-form-item>
                <el-form-item label="其他工资">
                    <el-input v-model="form.others" placeholder="请输入其他工资"></el-input>
                </el-form-item>
                <el-form-item label="总计">
                    <el-input v-model="form.total" placeholder="请输入总计"></el-input>
                </el-form-item>
                <el-form-item label="年月">
                    <el-date-picker v-model="form.yearx" type="month" value-format="yyyy-MM" placeholder="请选择工资月份">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="form.memo" placeholder="请输入备注"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>

    <script src="./common/js/jquery-1.9.0.min.js"></script>
    <script src="./common/js/vue.js"></script>
    <script src="./common/js/axios.min.js"></script>
    <script src="./common/element/element.js"></script>
    <script>
        const vue = new Vue({
            el: '#app',  
            data: {  
                tableData: [
                    {
                        "salaryid": "S20220629211252064731",
                        "sno": "S20220629224045",
                        "employid": "E20220629210755302628",
                        "basic": "7500",
                        "attend": "2000",
                        "reward": "-150",
                        "others": "800",
                        "total": "10500",
                        "yearx": "2022-06",
                        "memo": "无",
                        "employname": "AA",
                        "employ": {
                            "employid": "E20220629210755302628",
                            "eno": "E20220629224023",
                            "employname": "AA",
                            "sex": "男",
                            "deptid": "D20220629210342943354",
                            "dutyid": "D20220701220331998483",
                            "xueli": "研究生",
                            "graduate": "南京大学",
                            "contact": "13666666666",
                            "address": "中山路23号",
                            "workdate": "2022-06-30",
                            "memo": "无",
                            "deptname": "开发部",
                            "dutyname": "Java程序员",
                            "dept": {
                                "deptid": "D20220629210342943354",
                                "deptname": "开发部",
                                "manager": "AA",
                                "address": "二楼201",
                                "addtime": "2022-06-29",
                                "memo": "无"
                            },
                            "duty": {
                                "dutyid": "D20220701220331998483",
                                "dutyname": " 程序员",
                                "addtime": "2022-07-01",
                                "memo": " 程序员"
                            }
                        }
                    },
                    {
                        "salaryid": "S20220703134037510350",
                        "sno": "S20220703133945",
                        "employid": "E20220629210755302628",
                        "basic": "7500",
                        "attend": "2000",
                        "reward": "100",
                        "others": "0",
                        "total": "9600",
                        "yearx": "2022-07",
                        "memo": "无",
                        "employname": "AA",
                        "employ": {
                            "employid": "E20220629210755302628",
                            "eno": "E20220629224023",
                            "employname": "AA",
                            "sex": "男",
                            "deptid": "D20220629210342943354",
                            "dutyid": "D20220701220331998483",
                            "xueli": "研究生",
                            "graduate": "南京大学",
                            "contact": "13666666666",
                            "address": "中山路23号",
                            "workdate": "2022-06-30",
                            "memo": "无",
                            "deptname": "开发部",
                            "dutyname": " 程序员",
                            "dept": {
                                "deptid": "D20220629210342943354",
                                "deptname": "开发部",
                                "manager": "AA",
                                "address": "二楼201",
                                "addtime": "2022-06-29",
                                "memo": "无"
                            },
                            "duty": {
                                "dutyid": "D20220701220331998483",
                                "dutyname": " 程序员",
                                "addtime": "2022-07-01",
                                "memo": " 程序员"
                            }
                        }
                    }
                ], //列表数据
                pageSize: 8, // 每页显示行数
                pageNum: 1, // 页码
                total: 0, //数据总数
                dialogVisible: false, //增、改对话框是否显示
                form: {}, // 表单数据
                keywords: '', // 查询关键字
            }
        });
    </script>


</body>

</html>